<template>
  <div style="padding:20px;">
    <!-- 页面标签内容 -->
    <el-table
      :data="teachers"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"/>
      <el-table-column
        prop="career"
        show-overflow-tooltip
        label="资历"/>
      <el-table-column
        prop="level"
        label="讲师头衔"
        width="200"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.level===1?'success':'danger'">{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="80"/>
      <el-table-column
        prop="joinDate"
        width="200"
        label="入驻时间"/>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
// js脚本
export default {
// 相当于在vue对象中写代码
  data() {
    return {
      teachers: []
    }
  },
  created() {
    // 查询讲师列表显示
    this.getTeachers()
  },
  methods: {
    // 处理编辑删除单击事件函数
    handleEdit(index, teacher) {
      console.log(teacher)
    },
    handleDelete(index, teacher) {
      this.$confirm(`此操作将永久删除 ${teacher.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除api方法 传入要删除的讲师id
        teacherApi.deleteById(teacher.id).then(r => {
          this.$message.success('删除成功')
          // 刷新页面
          this.getTeachers()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getTeachers() {
      teacherApi.list().then(r => { // 封装后的工具axios实例请求返回的结果就是 响应对象的响应体数据(r对象)
        // console.log(r)
        this.teachers = r.data.items
      })
    }
  }
}
</script>
<style>
/* css样式 */
</style>
